<script setup lang="ts">
import { ref, watch, type Ref } from 'vue';
import { validateUserName, checkPasswordStrength, validatePhoneNumber, validateEmail } from "../utils/regExp/registerRuler";
import { useLoginStore } from '@/stores/login';
import { addUser, type registerUser } from '@/utils/api/request';

let loginData = useLoginStore(); // 共享的切换组件的数据
let userName: Ref<string> = ref(""); // 用户注册的用户名
let userNameStatus: Ref<string> = ref(""); // 根据用户注册的用户名是否合规变化图标
let password: Ref<string> = ref(""); // 用户注册的密码
let passwordStatus: Ref<string> = ref(""); // 根据用户的密码强度变化图标
let phone: Ref<string> = ref(""); // 用户注册的手机
let phoneStatus: Ref<string> = ref(""); // 根据用户的输入的手机号码是否合规变化图标
let email: Ref<string> = ref(""); // 用户注册的邮箱
let emailStatus: Ref<string> = ref(""); // 根据用户的输入的邮箱是否合规变化图标
let verificaionCode: Ref<string> = ref(""); // 验证码

// 模拟验证码的代码，真实的验证码功能需后端协同
let randomCode: Ref<string> = ref((Math.floor(Math.random() * 9000) + 1000).toString());

/**
 * 更换验证码的函数
 */
function changeCode() {
    randomCode.value = (Math.floor(Math.random() * 9000) + 1000).toString();
}

/**
 * 监听用户输入的用户名，判断用户名是否合规
 */
watch(userName, (newVal, oldVal) => {
    if (validateUserName(newVal)) {
        userNameStatus.value = "/src/assets/images/right.png";
    } else {
        userNameStatus.value = "/src/assets/images/wrong.png";
    }
})

/**
 * 监听用户输入的密码，根据用户输入的密码强度变化图标
 */
watch(password, (newVal, oldVal) => {
    if (checkPasswordStrength(newVal)) {
        passwordStatus.value = "/src/assets/images/right.png";
    } else {
        passwordStatus.value = "/src/assets/images/wrong.png";
    }
})

/**
 * 监听用户输入的手机号码，根据用户输入的手机号码是否合规变化图标
 */
watch(phone, (newVal, oldVal) => {
    if (validatePhoneNumber(newVal)) {
        phoneStatus.value = "/src/assets/images/right.png";
    } else {
        phoneStatus.value = "/src/assets/images/wrong.png";
    }
})

/**
 * 监听用户输入的邮箱，根据用户输入的邮箱是否合规变化图标
 */
watch(email, (newVal, oldVal) => {
    if (validateEmail(newVal)) {
        emailStatus.value = "/src/assets/images/right.png";
    } else {
        emailStatus.value = "/src/assets/images/wrong.png";
    }
})

/**
 * 注册校验函数
 */
function registerVerify() {
    if (randomCode.value !== verificaionCode.value) { // 验证码错误
        alert('验证码错误')
        verificaionCode.value = "";
    } else if ( // 只用当所有信息都符合规范时才能注册成功
        validateUserName(userName.value)
        && checkPasswordStrength(password.value)
        && validatePhoneNumber(phone.value)
        && validateEmail(email.value)) {
        fetchRegisterUser()
    } else {
        alert('注册失败，请输入正确的信息')
        verificaionCode.value = "";
    }
}

async function fetchRegisterUser() {
    let userInfo: registerUser = {
        userName: userName.value,
        password: password.value,
        phone: phone.value,
        email: email.value
    };
    let res = await addUser(userInfo);
    console.log(res);
    
    if (res.status) {
        alert('注册成功')
        changeComponent()
    }else{
        alert(`注册失败,\n ${res.data}`)
    }
}

/**
 * 切换组件的函数
 */
function changeComponent() {
    loginData.componentName = 'login'; // 将组件切换为登录组件
}
</script>
<template>
    <div class="user-info">
        <div class="user-info-detail">
            <div class="validateCard">
                <img :src="userNameStatus" alt="" v-show="userNameStatus">
            </div>
            <img src="../assets/images/user.png" alt="" title="用户名长度在2-20个字符">
            <input type="text" placeholder="请输入用户名(长度在2-20个字符)" v-model="userName" minlength="2" maxlength="20">
        </div>
        <div class="user-info-detail">
            <div class="validateCard">
                <img :src="passwordStatus" alt="" v-show="passwordStatus">
            </div>
            <img src="../assets/images/password.png" alt="" title="密码需含有大小写字母、数字、特殊字符，长度在8-16">
            <input type="password" placeholder="请输入密码" minlength="6" maxlength="18" v-model="password">
        </div>
        <div class="user-info-detail">
            <div class="validateCard">
                <img :src="phoneStatus" alt="" v-show="phoneStatus">
            </div>
            <img src="../assets/images/phone.png" alt="" title="请输入正确的中国大陆手机号码">
            <input type="text" placeholder="请输入您的手机号码" maxlength="11" v-model="phone">
        </div>
        <div class="user-info-detail">
            <div class="validateCard">
                <img :src="emailStatus" alt="" v-show="emailStatus">
            </div>
            <img src="../assets/images/mail.png" alt="" title="请输入正确格式的邮箱">
            <input type="text" placeholder="请输入您的邮箱" v-model="email">
        </div>
        <div class="verificaion">
            <div class="verificaion-input">
                <img src="../assets/images/verificaion.png" alt="">
                <input type="text" placeholder="请输入验证码" maxlength="4" v-model="verificaionCode">
            </div>
            <div class="verificaion-code" @click="changeCode()">
                {{ randomCode }}
            </div>
        </div>
        <button class="register" @click="registerVerify()">注册</button>
        <div class="bottom" @click="changeComponent()">登录</div>
    </div>
</template>

<style scoped>
.verificaion {
    display: flex;
}

.user-info-detail,
.verificaion-input,
.verificaion-code {
    width: 400px;
    height: 60px;
    margin-top: 15px;
    border: 1px solid #414f8e;
    box-shadow: 0 0 0 1px #3d4c8a;
    background-color: transparent;
}

.verificaion-input {
    width: 200px;
}

.verificaion-code {
    width: 160px;
    margin-left: 40px;
    line-height: 60px;
    text-align: center;
    color: var(--base-color);
    font-size: 32px;
    background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');
}

.user-info-detail img,
.verificaion-input img {
    width: 32px;
    height: 32px;
    margin: 14px;

}

.user-info-detail input,
.verificaion-input input {
    height: 50px;
    width: 320px;
    vertical-align: bottom;
    margin-bottom: 10px;
    /* 调整对齐的基线*/
    border: none;
    /* 去除输入框的边框 */
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}

.verificaion-input input {
    width: 120px;
}

.user-info-detail input:focus,
.verificaion-input input:focus {
    outline: none;
    /* 去除点击输入框后的边框 */
}

.user-info-detail {
    position: relative;
}

.validateCard {
    position: absolute;
    right: -60px;
}

.register {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    font-size: 18px;
    background-color: #43c8f4;
    color: #fff;
    border: none;
    border-radius: 5px;
}

.bottom {
    width: 100%;
    margin-top: 15px;
    text-align: center;
    text-decoration: underline;
    cursor: default;
}
</style>